<template>
  <!-- 歌手介绍 -->
  <div class="ard-ad">
    <div class="ad-box">
      <h4 class="ad-name">{{ artist }}</h4>
      <p class="ad-main">
        {{ briefDesc }}
      </p>
    </div>
    <div class="ad-box" v-for="(item, index) in desc" :key="index">
      <h4 class="ad-title">{{ item.ti }}</h4>
      <p class="ad-main">
        {{ item.txt }}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    artist: {
      type: String,
      default() {
        return "";
      },
    },
    briefDesc: {
      type: String,
      default() {
        return "";
      },
    },
  },
  data() {
    return {
      desc: [],
      id: "",
    };
  },
  mounted() {
    this.id = this.$route.query.id;

    this.getArtistDesc();
  },
  methods: {
    getArtistDesc() {
      this.axios({
        /* 歌手介绍接口 */
        url: "/artist/desc?id=" + this.id,
      })
        .then((res) => {
          this.desc = res.data.introduction;
          console.log(this.desc);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
.ard-ad {
  padding: 10px;
}
.ad-name,
.ad-title {
  margin: 10px 0;
}
.ad-name::before {
  content: "";
  padding-right: 10px;
  width: 0;
  height: 100%;
  border-left: 3px solid var(--color-theme);
}
.ad-main {
  width: 100%;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-size: 14px;
  line-height: 26px;
  margin-bottom: 30px;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  /* *word-wrap: break-word; */
  /* *white-space: normal; */
}
</style>